<template>
    <div class="serviceInfo">
        <div class="breadcrumb">
            <RouterLink :to="{ name: '/home/service-list' }">{{ t('serviceList.serviceList') }}</RouterLink>
            / {{ t('home.detailedPage') }}
        </div>
        <div class="service-top">
            <div class="service-write">{{ t('serviceList.inputOrderInfo') }}</div>
            <div class="service-step">
                <div class="oblongBox">
                    <div class="oblongFirst">{{ t('serviceList.orderSubmitted') }}</div>
                    <span class="firstBox"></span>
                </div>
                <div class="oblongBox">
                    <div class="oblong">
                        <div class="triangle-right"></div>
                        {{ t('serviceList.workerAccepted') }}
                    </div>
                    <span></span>
                </div>
                <div class="oblongBox">
                    <div class="oblong">
                        <div class="triangle-right"></div>
                        {{ t('serviceList.receivingConfirmed') }}
                    </div>
                    <span></span>
                </div>
                <div class="oblongBox">
                    <div class="oblong">
                        <div class="triangle-right"></div>
                        {{ t('serviceList.orderCompleted') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="getInfo">{{ t('serviceList.receivingInfo') }}</div>
        <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="left" class="topForm">
            <ElFormItem :label="t('serviceList.appointmentTime')" prop="appointmentTime">
                <ElDatePicker
                    v-model="form.appointmentTime"
                    type="datetime"
                    :placeholder="t('serviceList.timePlaceholder')"
                ></ElDatePicker>
            </ElFormItem>
            <ElFormItem :label="t('serviceList.fullName')" prop="customerName">
                <ElInput v-model="form.customerName" autocomplete="off"></ElInput>
            </ElFormItem>
            <ElFormItem :label="t('serviceList.address')" :required="true">
                <ElSelect v-model="form.province" :placeholder="t('serviceList.provincePlaceholder')" class="province">
                    <ElOption
                        v-for="item in provinceOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></ElOption>
                </ElSelect>
                <ElSelect v-model="form.city" :placeholder="t('serviceList.cityPlaceholder')" class="city">
                    <ElOption
                        v-for="item in cityOptions[form.province]"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></ElOption>
                </ElSelect>
                <ElSelect v-model="form.street" :placeholder="t('serviceList.districtPlaceholder')" class="street">
                    <ElOption
                        v-for="item in areaOptions[form.city]"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name"
                    ></ElOption>
                </ElSelect>
                <ElInput v-model="form.address" :placeholder="t('serviceList.addDetailPlaceholder')"></ElInput>
            </ElFormItem>
            <ElFormItem :label="t('serviceList.tel')" prop="customerPhone">
                <ElInput v-model="form.customerPhone" autocomplete="off"></ElInput>
            </ElFormItem>
            <ElFormItem :label="t('serviceList.comment')">
                <ElInput v-model="form.remark" autocomplete="off" type="textarea"></ElInput>
            </ElFormItem>
        </ElForm>
        <div class="good-news">
            <span class="good-left">{{ t('serviceList.productInfo') }}</span>
            <span class="good-right" @click="returnGoods">{{ t('serviceList.backToModify') }}</span>
        </div>
        <div class="bottom-news">
            <div class="image-news">
                <ImageView :imgSrc="serviceDetails?.imgSrc" :emptyHolder="true" />
            </div>
            <div class="title-news">{{ serviceDetails?.serviceName }}</div>
            <div class="quantity-news">
                <span v-for="(item, index) in spec" :key="index">{{ item }}</span>
            </div>
            <div class="total-news">{{ t('serviceList.quantityLabel') }}{{ route.query.serviceNum }}</div>
            <div class="money-news">
                <span>{{ t('serviceList.productAmount') }}</span>
                <span>￥{{ price }}</span>
            </div>
        </div>
        <div class="bottom-pay">
            <div class="pay-total">{{ t('serviceList.amountPayable') }}</div>
            <div class="pay-submit">￥{{ route.query.priceText }}</div>
            <div class="btn-submit" @click="submitService">{{ t('serviceList.submitOrder') }}</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { formatDateBeiJing } from '@/utils/utils';
import { createOrder, getServiceById } from '@/api/api.query.util';
import { ref, reactive, computed, Ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import provinceOptions from '@/assets/json/province.json';
import cityOptions from '@/assets/json/city.json';
import areaOptions from '@/assets/json/area.json';
import PubSub from 'pubsub-js';
import { onLocaleChanged, t } from '@/i18n';
import ImageView from '@/components/ImageView.vue';

const router = useRouter();
const route = useRoute();
const initForm = {
    appointmentTime: '',
    customerName: '',
    address: '',
    province: '',
    city: '',
    street: '',
    customerPhone: '',
    remark: '',
    provinceName: '',
    cityName: '',
};
const form = reactive({ ...initForm });
const price: number = route.query.priceText / route.query.serviceNum;
const id = route.query.userId;

const serviceDetails = ref();
const spec = ref('');

spec.value = route.query.spec;

onMounted(() => {
    const localForm = localStorage.getItem('orderInfo');
    if (localForm) {
        Object.assign(form, { ...JSON.parse(localForm) });
    }
});

watch(form, () => {
    localStorage.setItem('orderInfo', JSON.stringify(form));
});

getServiceDetails();

async function getServiceDetails() {
    const result = await getServiceById({
        method: 'POST',
        data: {
            serviceId: id,
        },
    });
    serviceDetails.value = result.result;
}

function returnGoods() {
    router.push({
        path: `/home/service-list/service-details/${route.query.userId}`,
        query: {
            serviceNum: route.query.serviceNum,
            spec: spec.value,
        },
    });
}
function submitService() {
    if (!form.appointmentTime) {
        ElMessage.warning(t('serviceList.timeEmptyTip'));
        return;
    }
    if (!form.customerName) {
        ElMessage.warning(t('serviceList.nameEmptyTip'));
        return;
    }
    if (!form.province || !form.city || !form.street || !form.address) {
        ElMessage.warning(t('serviceList.addressEmptyTip'));
        return;
    }
    if (!form.customerPhone) {
        ElMessage.warning(t('serviceList.telEmptyTip'));
        return;
    }
    provinceOptions.forEach((element: any) => {
        if (element.id === form.province) {
            form.provinceName = element.name;
        }
    });
    cityOptions[form.province].forEach((element: any) => {
        if (element.id === form.city) {
            form.cityName = element.name;
        }
    });
    createOrder({
        method: 'post',
        data: {
            address: form.provinceName + form.cityName + form.street + form.address,
            amount: route.query.serviceNum,
            appointmentTime: formatDateBeiJing(form.appointmentTime, 'yyyy-MM-dd hh:mm:ss', 'UCT'),
            customerName: form.customerName,
            customerPhone: form.customerPhone,
            remark: form.remark,
            skuId: route.query.skuId,
        },
    }).then((res) => {
        PubSub.publish('initCount');
        router.push({ name: '/home/my-orders/details', query: { orderId: res.result, remark: form.remark } });
        Object.assign(form, { ...initForm });
    });
}
const rules = ref(getRules());

onLocaleChanged(() => {
    rules.value = getRules();
});

function getRules() {
    return {
        appointmentTime: [
            {
                required: true,
                message: t('serviceList.timeEmptyTip'),
                trigger: 'change',
            },
        ],
        customerName: [
            {
                required: true,
                message: t('serviceList.nameEmptyTip'),
                trigger: 'change',
            },
        ],
        customerPhone: [
            {
                required: true,
                message: t('serviceList.telEmptyTip'),
                trigger: 'change',
            },
        ],
    };
}
</script>

<style scoped>
.serviceInfo {
    padding: 15px 95px 110px 30px;
    background-color: var(--section-color);
    border-radius: var(--border-radius);
}
.serviceInfo .breadcrumb {
    color: #666666;
    font-size: 12px;
}
.serviceInfo .breadcrumb a {
    color: #666666;
}
.topForm {
    width: 708px;
}
.appointmentTime {
    display: inline-flex;
    position: absolute;
    height: 100%;
    right: 5px !important;
    top: 0;
}
.service-top {
    display: flex;
    margin-top: 25px;
}
.service-step {
    display: flex;
}
.oblongBox {
    display: flex;
}
.triangle-right {
    position: absolute;
    border-top: 12px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid #fff;
}
.oblong {
    position: relative;
    width: 137px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    background-color: #ebebeb;
    color: #999999;
    font-size: 12px;
}
.oblongFirst {
    position: relative;
    width: 137px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    background-color: #3ab0a2;
    color: #fff;
    font-size: 12px;
}
.oblongBox span {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid #ebebeb;
}
.oblongBox .firstBox {
    border-top: 12px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid #3ab0a2;
}
.service-write {
    display: inline-block;
    height: 22px;
    line-height: 22px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    margin-right: 37px;
}
.getInfo {
    margin: 20px 0;
}
.good-news {
    display: flex;
    justify-content: space-between;
    width: 708px;
}
.good-left {
    font-size: 12px;
    color: #333;
}
.good-right {
    font-size: 12px;
    color: #3ab0a2;
    cursor: pointer;
}
.bottom-news {
    display: flex;
    justify-content: space-between;
    width: 708px;
}
.bottom-news {
    margin-top: 17px;
    height: 44px;
    line-height: 44px;
}
.image-news {
    width: 44px;
    height: 44px;
    border-radius: 4px;
}
.image-news img {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-color-transparent);
    border-radius: var(--border-radius);
    object-fit: cover;
}
.title-news {
    width: 171px;
    height: 34px;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 34px;
    letter-spacing: 0px;
    color: #333333;
}
.quantity-news span {
    width: 42px;
    height: 16px;
    border-radius: 4px;
    border: solid 1px #3ab0a2;
    font-size: 12px;
    line-height: 18px;
    color: #3ab0a2;
    padding: 0 6px;
}
.quantity-news span:nth-child(1) {
    margin-right: 5px;
}
.total-news {
    height: 12px;
    font-size: 12px;
    color: #666666;
}
.money-news {
    display: flex;
    flex-direction: column;
}
.money-news span {
    font-size: 12px;
    color: #333333;
}
.money-news span:nth-child(1) {
    width: 48px;
    height: 12px;
    line-height: 22px;
}
.bottom-pay {
    display: flex;
    justify-content: right;
    width: 708px;
    line-height: 28px;
    margin-top: 30px;
}
.pay-total {
    width: 48px;
    font-size: 12px;
    color: #333333;
    margin-right: 30px;
}
.pay-submit {
    width: 47px;
    font-size: 17px;
    color: #c7000b;
    margin-right: 70px;
}
.btn-submit {
    width: 72px;
    height: 28px;
    line-height: 28px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}
.el-input--prefix .el-input__inner {
    padding-left: 0px;
}

.province {
    width: 33%;
    margin: 0 2px 10px 0;
}
.city {
    width: 33%;
    margin-right: 2px;
}
.street {
    width: 33%;
}
/deep/ .el-input__prefix {
    display: inline-flex;
    position: absolute;
    height: 100%;
    left: 190px;
    top: 0;
    text-align: center;
}
/deep/ .el-input--prefix .el-input__inner {
    padding-left: 15px;
}
</style>
